<template>
  <div class="app-container">

    <div class="el-row--flex" style="margin-bottom: 20px;align-items: center">
      用车时间&nbsp;&nbsp;
      <el-date-picker v-model="orderTimeRange" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                      type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                      @change="changeTime" style="width: 360px" :clearable="true">
      </el-date-picker>
    </div>

    <el-table v-loading="loading" :data="list" border>
      <el-table-column label="订单编号" align="center" min-width="200" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <span style="font-size: 14px;">{{ row.orderNo || '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="司机名称" align="center" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <span>{{ row.driverName || '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用车时间" align="center" min-width="130" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <span>{{ row.useStartTime || '--' }}~{{ row.useEndTime || '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="开始公里数/结束公里数" align="center" min-width="130" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <span>{{ row.useStartKilometers || '--' }}~{{ row.useEndKilometers || '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用车日期" align="center" min-width="130" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <span>{{ row.useDate || '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用车时长(h)" align="center" min-width="130" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <span>{{ row.vehicleDuration || '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用车公里数" align="center" min-width="130" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <span>{{ row.vehicleKilometers || '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" min-width="130" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <span>{{ row.createTime || '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" min-width="130" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <span>{{ row.remark || '--' }}</span>
        </template>
      </el-table-column>


    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="params.pageNum"
      :limit.sync="params.pageSize"
      @pagination="getData"
    />

  </div>
</template>

<script>
import {vehicleProgresslist} from "@/api/charteredBus/detail";

export default {
  props: ['orderNo'],
  data() {
    return {
      nowId: null,
      params: {
        pageNum: 0, //页码   必选
        pageSize: 5, //每页显示数据 必选
      },
      loading: true,
      list: [],
      total: 0,
      orderTimeRange: []
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    //租赁时间改变
    changeTime(times) {

      if(times){
        this.params.useStartDate = times[0];
        this.params.useEndDate = times[1];
      }else {
        this.params.useStartDate = null;
        this.params.useEndDate = null;
      }



      this.params.pageNum = 1
      this.getData()
    },

    getData() {

      this.params.orderNo = this.orderNo

      this.loading = true
      vehicleProgresslist(this.params).then(response => {
        this.list = response.rows
        this.total = response.total
        this.loading = false
      });
    },
  },
}
</script>

<style>
</style>
